<template>
  <basic-dialog
    :visible.sync="remarkVisible"
    :title="'备注设置'"
    :width="'70%'"
    :handleClose="handleCloseDialog"
    :handleOpen="handleOpenDialog"
    :handle-ok="handleConfirm"
    :loadingBtn="confirmLoading"
    :okText="'提交'"
  >
    <BasicTable
      :showTotal="false"
      :dataSource="tableInfo.list"
      :columns="tableInfo.columns"
      :loading="tableInfo.loading"
      :tableHeight="480"
    />
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
import BasicTable from '@/components/skusTable';
import { REMARK_TABLE_COLUMNS } from '../constants'
import { queryRemarkListService, setRemarkService } from '@api/stock/stockOverflow';

export default {
  name: 'SetRemarkDialog', // 设置备注
  components: {
    BasicDialog,
    BasicTable,
  },
  props: {
    remarkVisible: {
      type: Boolean,
      default: false
    },
  },
  data () {
    return {
      tableInfo: {
        list: [],
        columns: REMARK_TABLE_COLUMNS,
        loading: false
      },
      confirmLoading: false
    };
  },
  methods: {
    handleOpenDialog () {
      this.getTableData()
    },
    // 关闭弹框
    handleCloseDialog () {
      this.$emit('update:remarkVisible', false);
    },
    // 获取表格数据
    async getTableData () {
      const res = await queryRemarkListService(
        {},
        state => { this.tableInfo.loading = state }
      );
      if (res?.retData) {
        this.tableInfo.list = res.retData;
      }
    },
    handleConfirm () {
      if (this.tableInfo.list) {
        this.setRemark(this.tableInfo.list)
      }
    },
    // 提交
    async setRemark (param) {
      const res = await setRemarkService(param, state => { this.confirmLoading = state })
      if (res) {
        this.$message.success('提交成功');
        this.handleCloseDialog();
      }
    }
  }
};
</script>
